<template>
	<view class="pageItem">
		<view class="main">
			<view class="movie_item">
				<view class="m_con">
					<block v-if="Object.keys(list).length > 0">
					<!-- #ifdef APP -->
						<view v-for="(item,index) in list" class="movie" @click="$r('/pages/popular/shortDetail?id='+item.id)" >
					<!-- #endif -->
					<!-- #ifdef H5 -->
						<view v-for="(item,index) in list" class="movie" @click="$r('/pages/popular/shortDetail_h5?id='+item.id)" >
					<!-- #endif -->
							<image class="img" :src="realUrl(item.logo)"></image>
							<view class="txt">{{show_pt(item)}}</view>
						</view>
					</block>
					
					<block v-if="empty_show">
						<view style="width:100%;margin-top: 20vw;" v-if="list.length==0">
							<u-empty mode="data" iconSize="120" :text="$t('nodata')" ></u-empty>
						</view>
					</block>
				</view>
			</view>
		</view>
		<view class="bg_item"></view>
	</view>
</template>

<script>
	import lang_mix from '@/lib/mixin/lang_mixin.js';
	export default {
		mixins : [lang_mix],
		data() {
			return {
				load_type : 'more',
				loading : 0,
				empty_show : 0, 
				page : 1,
				list:[
					
				],
			};
		},
		onReachBottom() {
			this.loadData();
		},
		onLoad() {
			//��近观��
			this.loadData();
		},
		methods:{
			loadData(){
				if (this.load_type === 'loading' || this.load_type === 'no_more') {
					//防止重复加载
					return;
				}
				this.load_type = 'loading';
				let url = this.site_url + 'api/auth/member/history_list?page='+this.page;
					this.areq(url).then(res=>{
						this.empty_show = 1;
						this.loading = 1;
						   if(res.code == 1){
							   this.page++;
							   this.list = [...this.list,...res.data];
							   if(res.data.length == 15)
							   {
							   	this.load_type = 'more';
							   }else{
							   	this.load_type = 'no_more';
							   }
						   }else{
							   this.load_type = 'no_more';
						   }
					})	
			},
			
		}
	}
</script>

<style lang="scss">
.bg_item {
	@include bg_item(60vw);
}
.main{
	width: 100%;
	position: relative;
	z-index: 2;
	padding: calc(var(--status-bar-height) + 1vw) 4% 0;
	.movie_item{
		.m_con{
			width: 100%;
			display: flex;
			align-items: center;
			flex-wrap: wrap;
			.movie:not(:nth-child(3n+1)){
				margin-left: 2%;
			}
			.movie{
				width: 32%;
				margin-top: 3.2vw;
				position: relative;
				.img{
					width: 100%;
					height: 35vw;
					border-radius: 2vw;
				}
				.txt{
					width: 100%;
					padding-top: 0.5vw;
					font-size: 3.7vw;
					font-weight: bold;
					color: $main_color5;
					@include text_over_style(1);
				}
			}
		}
	}
}
</style>
